﻿@model EC18_ESHOP.Models.ProductModel

@{
    ViewBag.Title = "UpdateProduct";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}
<script src="~/Content/ckeditor/ckeditor.js"></script>
<div class="page-header position-relative">
    <h1>Quản lý sản phẩm
		<small>
            <i class="icon-double-angle-right"></i>
            Cập nhật thông tin sản phẩm
        </small>
    </h1>
</div>
<!--/.page-header-->

@{EC18_ESHOP.Models.PRODUCT product = ViewBag.product;}
@if (product != null)
{
    <div class="row-fluid span12">

        <form method="post" action="~/Admin/AdminHome/updateProductPost">
            <div class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="txtProductId">Mã sản phẩm</label>
                    <div class="controls">
                        <input type="text" id="ProductId" name="ProductId" value="@product.ProductId" />
                        <input type="text" id="Product_ID" name="Product_ID" value="@product.Product_ID" style="display: none" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="txtProductName">Tên sản phẩm</label>

                    <div class="controls">

                        <input type="text" id="ProductName" name="ProductName" value="@product.ProductName" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="ulImages">Giá sản phẩm</label>
                    <div class="controls">

                        <input type="text" id="ProductPrice" name="ProductPrice" value="@product.ProductPrice" />
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="drlManufacturer">Danh mục</label>
                    <div class="controls">
                        <div class="widget-box span3">
                            <div id="category">
                                <select id="CategoryId" name="CategoryId">
                                    @{List<EC18_ESHOP.Models.CATEGORY> arrCategory = ViewBag.arrCategory;
                                      if (arrCategory.Count > 0)
                                      {
                                          foreach (EC18_ESHOP.Models.CATEGORY item in arrCategory)
                                          {
                                              if (item.Category_Id == product.CategoryId)
                                              {<option selected value="@item.Category_Id">@item.CategoryName</option>}
                                              else
                                              {<option value="@item.Category_Id">@item.CategoryName</option>}
                                          }
                                      }
                                    }
                                </select>

                            </div>
                        </div>
                        <div class="widget-box span6">
                            <div id="accordion1" class="accordion">
                                <div class="accordion-group">
                                    <div class="accordion-heading">
                                        <a href="#collapseTwo" data-parent="#accordion1" data-toggle="collapse" class="accordion-toggle collapsed">Thêm danh mục mới</a>
                                    </div>

                                    <div class="accordion-body collapse" id="collapseTwo" style="height: 0">
                                        <div class="accordion-inner">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label>Danh mục:</label></td>
                                                    <td>
                                                        <input id="txtCategoryName" type="text" /></td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <label>Danh mục cha: </label>
                                                    </td>
                                                    <td>
                                                        <select id="categoryParent">
                                                            @{List<EC18_ESHOP.Models.CATEGORY> arrCategory2 = ViewBag.arrCategory;
                                                              if (arrCategory2.Count > 0)
                                                              {
                                                                <option value="0">null</option>
                                                                  foreach (EC18_ESHOP.Models.CATEGORY item in arrCategory2)
                                                                  {<option value="@item.Category_Id">@item.CategoryName</option>}
                                                              }
                                                            }
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: right">
                                                        <button class="btn btn-mini btn-danger" type="button" onclick="addNewCategory()">Thêm mới</button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="drlManufacturer">Nhà sản xuất</label>
                    <div class="controls">
                        <div class="widget-box span3">
                            <div id="manufacturer">
                                <select id="ManufacturerId" name="ManufacturerId">
                                    @{List<EC18_ESHOP.Models.MANUFACTURER> arrManufactory = ViewBag.arrManufactory;
                                      foreach (EC18_ESHOP.Models.MANUFACTURER item in arrManufactory)
                                      {
                                          if (item.ManufacturerId == product.ManufacturerId)
                                          {<option selected value="@item.ManufacturerId">@item.ManufacturerName</option>}
                                          else
                                          {<option value="@item.ManufacturerId">@item.ManufacturerName</option>}
                                      }
                                    }
                                </select>

                            </div>
                        </div>
                        <div class="widget-box span6">
                            <div id="accordion2" class="accordion">
                                <div class="accordion-group">
                                    <div class="accordion-heading">
                                        <a href="#collapseOne" data-parent="#accordion2" data-toggle="collapse" class="accordion-toggle collapsed">Thêm nhà sản xuất mới</a>
                                    </div>

                                    <div class="accordion-body collapse" id="collapseOne" style="height: 0;">
                                        <div class="accordion-inner">
                                            <table>
                                                <tr>
                                                    <td>Tên nhà sản xuất: </td>
                                                    <td>
                                                        <input id="txtManufacturerName" type="text" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: right">
                                                        <button class="btn btn-mini btn-danger" type="button" onclick="addNewManufacturer()">Thêm mới</button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="ulImages">Thuộc tính</label>
                    <div class="controls">
                        <div class="widget-box span6" style="display: none">
                            <div id="accordion3" class="accordion">
                                <div class="accordion-group">
                                    <div class="accordion-heading">
                                        <a href="#collapseThree" data-parent="#accordion3" data-toggle="collapse" class="accordion-toggle collapsed">Thêm thuộc tính mới</a>
                                    </div>
                                    <div class="accordion-body collapse" id="collapseThree" style="height: 0">
                                        <div class="accordion-inner">
                                            <table style="width: auto">
                                                <tr>
                                                    <td>Thuộc tính</td>
                                                    <td>
                                                        <select id="cbbProductProperty">
                                                            @{List<EC18_ESHOP.Models.PROPERTY> arrProperty = ViewBag.arrProperty;
                                                              foreach (EC18_ESHOP.Models.PROPERTY item in arrProperty)
                                                              {
                                                                <option value="@item.PropertyId">@item.PropertyName</option>
                                                              }
                                                            }
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Giá trị:</td>
                                                    <td>
                                                        <input type="text" id="txtPropertyValueAddNew" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: right">Là thuộc tính quan trọng?
                                                        <input checked type="checkbox" id="ckbIsImportant" />
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="2" style="text-align: right">
                                                        <button class="btn btn-mini btn-danger" type="button" onclick="addNewProperty()">Thêm mới</button>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="tableProperty">

                            @* --------phan css cho propertyEdit-------- *@
                            <style>
                                .propertyEdit {
                                    cursor: pointer;
                                }
                            </style>
                            @* ---------------- *@


                            <table class="table">
                                <tr>
                                    <th>Thông số</th>
                                    <th>Giá trị</th>
                                    <th>Chỉnh sửa</th>
                                </tr>
                                @foreach (EC18_ESHOP.Models.PRODUCT_PROPERTIES item in product.PRODUCT_PROPERTIES)
                                {
                                    <tr data-propertyId="@item.PropertyId">
                                        <td class="PropertyName">
                                            @item.PROPERTY.PropertyName
                                        </td>
                                        <td class="PropertyValue">
                                            @Html.Raw(HttpUtility.HtmlDecode(item.Value))
                                        </td>
                                        <td>
                                            <div class="hidden-phone visible-desktop action-buttons">
                                                <span class="green propertyEdit">
                                                    <i class="icon-pencil bigger-130"></i>
                                                </span>
                                                <a class="red" onclick ="deleteProperty('@item.ProductId', '@item.PropertyId')">
                                                    <i class="icon-trash bigger-130"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!----------->
            <h5 class="header green clearfix">Mô tả</h5>
            <textarea class="ckeditor" cols="80" id="Description" name="Description" rows="10">@Html.Raw(HttpUtility.HtmlDecode(product.Description))</textarea>

            <div class="imgUpdate" id="imgProduct">
                <h5 class="header green clearfix">Hình ảnh sản phẩm</h5>
                <table class="table">
                    @foreach (string item in ViewBag.arrImg)
                    {
                        <tr>
                            <td style="width: 300px">
                                <img src="@item" />
                            </td>
                           @* <td style="width: 600px;">
                                <div class="hidden-phone visible-desktop action-buttons">
                                    <a class="red" onclick ="deleteImage('@item', '@product.ProductId')">
                                        <i class="icon-trash bigger-130"></i>
                                    </a>
                                </div>
                            </td>*@
                            <td>
                                <input type="file" name="@item"/>
                            </td>
                        </tr>
                    }
                </table>
            </div>


            <div class="space-4"></div>
            <div class="form-horizontal">
                <div class="form-actions">
                    <button class="btn btn-info" type="submit">
                        <i class="icon-ok bigger-110"></i>
                        Cập nhật
                    </button>

                    <button class="btn" type="reset">
                        <i class="icon-undo bigger-110"></i>
                        Hủy cập nhật
                    </button>
                </div>
            </div>

            <!-- Modal login -->
            <div class="modal fade" id="modalEditProperty" style="display: none">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">Chỉnh sửa thông số sản phẩm</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <label>Thông số</label>
                                <input type="text" id="txtPropertyId" style="display: none" />
                                <input type="text" readonly="true" class="form-control" id="txtPropertyName" name="txtPropertyName">
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">Giá trị</label>
                                <div class="col-sm-6">
                                    <textarea class="ckeditor" cols="20" id="editorProperty" name="editor1" rows="2"> </textarea>
                                </div>
                            </div>
                            <div class="form-group" id="hidden-login">
                                <br />
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button class="btn btn-mini btn-danger" type="button" onclick="updateProperty()">Cập nhật</button>
                                    <button type="reset" class="btn btn-mini btn-danger">Hủy</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
            </div>
        </form>
    </div>
}


<script src="/Content/assets/js/jquery-1.10.2.js"></script>

<script type="text/javascript">

    function getSelectedText(elementId) {
        var elt = document.getElementById(elementId);
        if (elt.selectedIndex == -1)
            return null;
        return elt.options[elt.selectedIndex].value;
    }

    function addNewCategory() {
        var val = {
            categoryParent: getSelectedText('categoryParent'),
            categoryName: document.getElementById('txtCategoryName').value
        }
        $.post('/Admin/AdminHome/addCategory/', val, function (data) {
            console.log(data);
            document.getElementById("category").innerHTML = data.data;
            //$('#category').html = data.data;
        });
    }

    function addNewManufacturer() {
        var val = {
            manufacturerName: document.getElementById('txtManufacturerName').value
        }
        $.post('/Admin/AdminHome/addManufacturer/', val, function (data) {
            console.log(data);
            document.getElementById("manufacturer").innerHTML = data.data;
        });
    }

    function updateProperty() {
        $('#modalEditProperty').modal('hide');
        var val = {
            propertyValue: CKEDITOR.tools.htmlEncode(CKEDITOR.instances['editorProperty'].getData()),
            propertyId: $('#txtPropertyId').val(),
            productId: '@product.Product_ID'
        }
        console.log(val);
        $.post('/Admin/AdminHome/updateProductProperty', val, function (data) {
            document.getElementById("tableProperty").innerHTML = data.data;
        });
    }

    function showModalProperty(propertyId, propertyName, propertyValue) {
        $('#txtPropertyName').val(propertyName);
        $('#txtPropertyId').val(propertyId);
        CKEDITOR.instances['editorProperty'].setData(propertyValue);
        $('#modalEditProperty').modal('show');
    }

    function deleteProperty(productId, propertyId) {
        $.post('/Admin/AdminHome/deleteProductProperty', { productId: productId, propertyId: propertyId }, function (data) {
            document.getElementById("tableProperty").innerHTML = data.data;
        });
    }

    function addNewProperty() {
        var val = {
            productId: '@product.Product_ID',
            propertyId: getSelectedText('cbbProductProperty'),
            value: $('#txtPropertyValueAddNew').val(),
            isImportant: document.getElementById('ckbIsImportant').checked
        };

        $.post('/Admin/AdminHome/addNewProductProperty', val, function (data) {
            document.getElementById("tableProperty").innerHTML = data.data;
        });
    }

    //function deleteImage(url, productId) {
    //    var val = {
    //        url: url,
    //        productId: productId
    //    };

    //    $.post('/Admin/AdminHome/deleteImage', val, function (data) {
    //        document.getElementById("imgProduct").innerHTML = data.data;
    //    });
    //}

    $(function () {
        $('.propertyEdit', this).click(function () {
            var _property = $(this).parent().parent().parent(); /*Nhay ra ngoai cho <tr data-propertyId >*/
            var _propertyId = _property.attr('data-propertyId'); /*lay id tu data-propertyId*/
            var _propertyName = $.trim(_property.children('.PropertyName').text()); /*lay doan text trong propertyname + trim [bo khoang trang thua]*/
            var _propertyValue = _property.children('.PropertyValue').html(); /*lay html trong propertyValue*/

            /*phan code cua showModalProperty*/
            $('#txtPropertyName').val(_propertyName);
            $('#txtPropertyId').val(_propertyId);
            CKEDITOR.instances['editorProperty'].setData(_propertyValue);
            $('#modalEditProperty').modal('show');
        });
    });
</script>
